<!-- 公司 -->
<template>
  <div class="fullW">
    <breadcrumb />

    <div class="brw pb-24px pt-24px">
      <div class="profiles">
        <div class="photo">
          <useImage class="img" :src="detailData.companyImg"/>
        </div>
        <div class="info">
          <div class="title">{{detailData.companyName}}</div>
          <div class="address">
            {{detailData.address}}
          </div>
          <div class="contact">
            <div><i class="iconfont icon-phone"></i>电话：{{detailData.cantactPhone}}</div>
            <!-- <div>
              <i class="iconfont icon-mailbox"></i>邮箱：22211223232@ggjs.com
            </div> -->
          </div>
        </div>
      </div>
      <div class="serve mt-24px">
        <div class="use-title-icon">服务类型</div>
        <div class="tags">
          <span v-for="(item, index) in detailData.companyServiceList" :key="index">{{item.serviceItemTypeVO.name}}</span>
        </div>
      </div>
    </div>

    <div class="brw pb-24px pt-24px mt-16px">
      <div class="use-title-icon">企业详情</div>
      <div class="companyDescribe">
        {{ detailData.companyDesc }}
      </div>
    </div>

    <div class="brw pb-24px pt-24px mt-16px" v-if="detailData.categoryCodes.includes('OVERSEAS_WAREHOUSE')">
      <div class="use-title-icon">海外仓服务</div>
      <div class="warehouseList">
        <ul>
          <li v-for="(item, index) in detailData.companyWarehouseList" :key="index">
            <useImage class="img" :src="item.warehouseImg"/>
            <div class="name">
              <span>{{item.warehouseName}}</span>
              <span>{{item.warehouseArea}}㎡</span>
            </div>
            <div class="address">
              <i class="iconfont icon-address"></i>
              <p>地址：{{ item.warehouseAddress }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="brw pb-24px pt-24px mt-16px" v-if="detailData.categoryCodes.includes('SPECIAL_LINE')">
      <div class="use-title-icon">专线</div>
      <div class="railway-line">
        <div class="item">
          <div class="img">
            <img src="@/assets/images/icon1.png" />
          </div>
          <div>包裹限重：{{detailData.packageWeightMin}}-{{detailData.packageWeightMax}}kg</div>
        </div>
        <div class="item">
          <div class="img">
            <img src="@/assets/images/icon2.png" />
          </div>
          <div>尺寸限制：<span v-if="detailData.packageLength">{{detailData.packageLength}}*{{ detailData.packageWidth }}*{{ detailData.packageHeight }}</span><span v-else>无</span></div>
        </div>
        <!-- <div class="item">
          <div class="img">
            <img src="@/assets/images/icon3.png" />
          </div>
          <div>走货属性： 带电商品、液体、普货。</div>
        </div> -->
        <div class="item">
          <div class="img">
            <img src="@/assets/images/icon4.png" />
          </div>
          <div>
            揽货范围：{{ detailData.deliveryCityNames }}
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="@/assets/images/icon5.png" />
          </div>
          <div class="content">
            申报要求：{{ detailData.declareDesc||'无' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta(
    { title: '公司详情' }
)
const route = useRoute();

const detailData = ref({
  categoryCodes:[]
})
const getDetail = ()=>{
    api.get(`/userCompany/detail/${route.query.id}`,{loading:true}).then(res=>{
        detailData.value = res
        detailData.value.categoryCodes = detailData.value.categoryCodes.split(",")
        useHead({
            title: `${detailData.value.companyName}-${appTitle}`,
        })
    })
}
onMounted(() => {
    getDetail()
})
</script>

<style scoped lang="scss">
.profiles {
  display: flex;

  .photo {
    width: 280px;
    height: 190px;
    margin-right: 24px;
    border-radius: 4px;
    overflow: hidden;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    .title {
      line-height: 26px;
      font-size: 18px;
      font-weight: bold;
    }

    .address {
      margin-top: 8px;
      line-height: 22px;
      height: 88px;
    }

    .tags {
      padding-top: 4px;
      color: var(--use-color-info-light-2);
      line-height: 22px;

      > div {
        margin-top: 8px;
      }
    }

    .contact {
      padding-top: 20px;

      .iconfont {
        margin-right: 8px;
      }
    }
  }
}

.tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  span {
    background: #f0f2f9;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    padding: 0 12px;
  }
}

.companyDescribe {
  p {
    text-indent: 2em;
  }
}

.warehouseList {
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  li {
    width: 368px;
    padding: 16px;
    border: 1px solid var(--use-color-line);
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      border-color: var(--use-color-info);
    }

    .img {
      width: 336px;
      height: 180px;
      border-radius: 4px;
    }

    .name {
      line-height: 24px;
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      span {
        &:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
        }
        &:nth-child(2) {
          font-size: 14px;
        }
      }
    }

    .address {
      display: flex;
      .iconfont {
        margin-right: 8px;
      }
      line-height: 22px;
    }
  }
}

.railway-line {
  .item {
    margin: 13px 0;
    line-height: 22px;
    display: flex;
    align-items: center;
    &:last-of-type {
      margin-bottom: 0;
    }
    .img {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 12px;
      border: 1px solid var(--use-color-line);
      border-radius: 32px;
      img {
        width: 18px;
        height: 18px;
      }
    }
    .content {
      flex: 1;
    }
  }
}
</style>
